<!DOCTYPE html>
<html>
<head>
    <title>资产列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/mescroll.min.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=pQFgFpS0VnMXwCRN6cTc1jDOcBVi3XoD"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<div class="page__bd" style="height:50px;">
    <div class="weui-tab">
        <div class="weui-navbar">
            <div id="tab1" class="weui-navbar__item weui-bar__item_on">
                按位置查询
            </div>
            <div id="tab2" class="weui-navbar__item">
                按名称查询
            </div>
        </div>
    </div>
</div>

<div class="weui-cells weui-cells_form">
    <div class="weui-cell">
        <div class="weui-cell__bd weui_cell_primary name">
            <input id="input" class="weui-input" type="text" placeholder="输入距离查询周围资产"/>
        </div>
        <a href="javascript:;" id="search" class="weui-btn weui-btn_mini weui-btn_primary" >查询</a>
    </div>
</div>


<div class="weui-cells">
    <div class="weui-panel weui-panel_access">
        <div id="count" class="weui-panel__hd"></div>
    </div>
    <div id="ul" >

    </div>
</div>
<!--<input type="file" style="/* visibility: hidden */" capture="camera" accept="image/*,video/*" name="" value="" >-->
</body>
<script src="js/mescroll.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="../../js/jquery-weui.js"></script>

<script type="text/javascript" class="navbar js_show">
    $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
</script>

<script>
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    var longitude=getQueryString("longitude");
    var latitude=getQueryString("latitude");
    var map = new BMap.Map("allmap");

    var url="/shambles/baiduMap/getAssetsByDistanceImg.do";

    var limit = 10;
    var offset = 0;
    var search = "";
    var sort = "date";
    var order = "desc";

    $(".weui-loadmore").hide();
    $(".weui-cells__title").hide();

    var loading = false;  //状态标记

    $("#search").on("click",function(){
        search = $("#input").val();
        limit = 10;
        offset = 0;
        $("#ul").children('li').remove();
        loading = false;
        loadlist();
    });

    $("#tab1").on("click",function(){
        $("#input").attr("placeholder","输入距离查询周围资产");
        url="/shambles/baiduMap/getAssetsByDistanceImg.do";
        limit = 10;
        offset = 0;
        $("#ul").children('li').remove();
        loading = false;
        loadlist();
    });

    $("#tab2").on("click",function(){
        $("#input").attr("placeholder","");
        url="/shambles/mobile/asset/getAll.do";
        limit = 10;
        offset = 0;
        $("#ul").children('li').remove();
        loading = false;
        loadlist();
    });
    //创建MeScroll对象
    var mescroll = new MeScroll("body", {
        down: {
            auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback //下拉刷新的回调
        },
        up: {
            noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
            auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            empty: {
                icon: null, //图标,默认null
                tip: "暂无相关数据~", //提示
            },
            callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop:{ //配置回到顶部按钮
                src: "mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                //offset : 1000
            }
        }
    });

    /*下拉刷新的回调 */
    function downCallback(){
        // //联网加载数据
        // getListDataFromNet(0, 1, function(data){
        //     //联网成功的回调,隐藏下拉刷新的状态
        //     mescroll.endSuccess();
        //     //设置列表数据
        //     setListData(data, false);
        // }, function(){
        //     //联网失败的回调,隐藏下拉刷新的状态
        //     mescroll.endErr();
        // });
        loadlist();
    }

    /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
    function upCallback(page){
        loadlist();
    }


    sign_URL=document.location.toString();

    $.ajax({
        url : "../../wechat/sign.do",
        data : {
            campusId:1,
            url:sign_URL
        },
        async: false,
        type : "GET",
        success : function(data) {
            var ticket=JSON.parse(data);
            /*
           * 此处需要两次执行相同的函数，否则返回ture时不能执行以下函数
           */


            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: ticket.appId,
                timestamp: ticket.timestamp,
                nonceStr: ticket.nonceStr,
                signature: ticket.signature,
                jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
                    'onMenuShareAppMessage', 'onMenuShareQQ',
                    'onMenuShareWeibo', 'hideMenuItems',
                    'showMenuItems', 'hideAllNonBaseMenuItem',
                    'showAllNonBaseMenuItem', 'translateVoice',
                    'startRecord', 'stopRecord', 'onRecordEnd',
                    'playVoice', 'pauseVoice', 'stopVoice',
                    'uploadVoice', 'downloadVoice', 'chooseImage',
                    'previewImage', 'uploadImage', 'downloadImage',
                    'getNetworkType', 'openLocation', 'getLocation',
                    'hideOptionMenu', 'showOptionMenu', 'closeWindow',
                    'scanQRCode', 'chooseWXPay',
                    'openProductSpecificView', 'addCard', 'chooseCard',
                    'openCard' ]
            });




        }
    });


    // =======加载数据loadlist();
    function loadlist() {
        $.ajax({
            type: "get",
            url: url,
            data: { "limit" : limit,
                "offset" : offset,
                "search" : search,
                "lng" : longitude,
                "lat" : latitude
            },
            dataType: "json",
            error: function (request) {
                //联网失败的回调,隐藏下拉刷新的状态
                mescroll.endErr();
            },
            success: function (text) {
                var data=text.rows;
                var count=text.total;
                var imgs=text.fileBytes;
                console.log(data);
                console.log(imgs);

                var span=document.createElement("span");
                span.innerHTML=" "+count+"条记录";
                var count = document.getElementById('count');
                $("#count").children().remove();
                count.appendChild(span);

                if (data.length > 0) {
                    var i = 0;
                    for(; i < data.length; i++){
                        var obj = data[i];
                        var guid=obj.guid;

                        var img=null;
                        if(imgs[guid]!=null){
                            img="/shambles/"+imgs[guid];
                        }

                        var time="时间:"+actionTime(obj.date);
                        var distance=null;
                        console.log(obj.name+"   "+obj.detail+"  "+obj.lng+"   "+obj.lat);
                        if(obj.lng!=""&&obj.lat!=""){
                            distance=getDistance(obj.lng,obj.lat);
                        }
                        var li_1=addDiv(img,obj.address,"距离:"+distance,obj.roomProperty+"("+obj.buildArea+"M<sup>2</sup>)"
                            ,obj.region,"资产编号:"+obj.num);
                        li_1.setAttribute("guid",guid);
                        li_1.setAttribute("onclick","clickEvent(this);");
                        $("#ul").append(li_1);
                    }
                    offset=offset+i;
                }
                //联网成功的回调,隐藏下拉刷新的状态;
                mescroll.endSuccess(count); //无参
            }
        });
    }

    function addDiv(src,title,content,time,interval,manageRegion){
        var li=document.createElement("li");
        var div_1=document.createElement("div");
        div_1.setAttribute("class","single-mode");
        var div_1_1=document.createElement("div");
        div_1_1.setAttribute("class","img-left");
        var img=document.createElement("img");
        if(src!=null){
            img.setAttribute("src",src);
            img.setAttribute("class","img");
            div_1_1.appendChild(img);
        }else{
            img.setAttribute("src","/shambles/img/notImg.jpg");
            img.setAttribute("class","img");
            div_1_1.appendChild(img);
        }
        div_1.appendChild(div_1_1);
        var div_2=document.createElement("div");
        div_2.setAttribute("class","text-right");
        var div_2_1=document.createElement("div");
        div_2_1.setAttribute("class","single-inner");
        var div_2_1_1=document.createElement("div");
        div_2_1_1.setAttribute("class","title");
        addSpan(div_2_1_1,title);
        var div_2_1_2=document.createElement("div");
        div_2_1_2.setAttribute("class","right_text");
        addSpan(div_2_1_2,manageRegion);
        var div_2_1_3=document.createElement("div");
        addSpan(div_2_1_3,time);
        div_2_1_3.setAttribute("class","weui-cells__title");
        div_2_1_3.setAttribute("style","margin:2px 0px 2px 0px");
        var div_2_1_4=document.createElement("div");
        addSpan(div_2_1_4,content);
        div_2_1_4.setAttribute("class","weui-cells__title");
        div_2_1_4.setAttribute("style","margin:2px 0px 2px 0px");
        var div_2_1_5=document.createElement("div");
        addSpan(div_2_1_5,interval);
        div_2_1_5.setAttribute("class","weui-cells__title");
        div_2_1_5.setAttribute("style","margin:2px 0px 2px 0px");

        div_2_1.appendChild(div_2_1_1);
        div_2_1.appendChild(div_2_1_2);
        div_2_1.appendChild(div_2_1_3);
        div_2_1.appendChild(div_2_1_4);
        div_2_1.appendChild(div_2_1_5);
        div_2.appendChild(div_2_1);


        li.appendChild(div_1);
        li.appendChild(div_2);

        li.setAttribute("class","weui-cell");

        return li;
    }

    function clickEvent(that){
        var guid=encodeURI($(that).attr("guid"));
        wx.getLocation({
            success : function(res) {
                // alert(JSON.stringify(res));
                var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                // $("#latitude").val(latitude);
                var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。

                $.get("/shambles/mobile/map/baiduSwitch.do",{ //微信地理位置坐标转换成百度地图坐标
                    longitude:longitude,
                    latitude:latitude
                },function(text){
                    var obj = $.parseJSON(text);
                    var result=obj.result;
                    var lat=result[0].y;
                    var lng=result[0].x;
                    location.href="assetDetail.html?guid="+guid+"&latitude="+lat+"&longitude="+lng;
                });

            },
            cancel : function(res) {
                console.log('用户拒绝授权获取地理位置');
            }
        });
    }

    function addSpan(div,text){
        var span_1=document.createElement("span");
        span_1.innerHTML=text;
        div.appendChild(span_1);
    }


    function actionTime(value){
        var date = new Date(value);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }

    $(window).scroll(function(){  //只要窗口滚动,就触发下面代码

        var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度

        if( scrollt >200 ){  //判断滚动后高度超过200px,就显示

            $("#gotop").fadeIn(400); //淡入

        }else{

            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

        }

    });


    function getDistance(lng,lat){
        var pointA = new BMap.Point(longitude,latitude);  // 创建点坐标A--大渡口区
        var pointB = new BMap.Point(lng,lat);  // 创建点坐标B--江北区
        var d=map.getDistance(pointA,pointB)/1000;
        return d.toFixed(2)+' KM';  //获取两点距离,保留小数点后两位
    }

    $("#gotop").on("click",function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
        $("html,body").animate({scrollTop:"0px"},200);

    });



</script>
<style>
    ul{
        list-style:none;
        border-bottom: 1px solid #e8e8e8;
    }
    li{
        margin: 0px;
        padding: 0px;
        height: 123px;
        padding: 0px;
        border-bottom: 1px solid #ffffff;
        background-color: white;
        display: block;
        zoom: 1;
    }
    .single-mode{
        position: relative;
        float: left;
        background-color: #ffffff;
    }
    .img{
        display: inline-block;
        width: 130px;
        height: 120px;
        vertical-align: middle;
        transition: all .5s ease-out .1s;
    }
    .img-left{
        width: 130px;
        height: auto;
    }
    .text-right{
        height: 100%;
        overflow: hidden;
    }
    .right_text{
        padding:2px 0px 2px 15px;
    }
    .single-inner{
        display: inline-block;
        width: 100%;
        vertical-align: middle;
    }
    .title{
        font-size: 20px;
        line-height: 1.3;
        font-weight: 700;
        max-height: 52px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        padding:2px 0px 2px 15px;
    }

    .arrow{
        border: 9px solid transparent;
        border-bottom-color: #3DA0DB;
        width: 0px;
        height: 0px;
        top:0px;
    }
    .stick{
        width: 8px;
        height: 14px;
        border-radius: 1px;
        background-color: #3DA0DB;
        top:15px;
    }
    #gotop div{
        position: absolute;
        margin: auto;
        right: 0px;
        left: 0px;
    }
    #gotop{
        background-color: #dddddd;
        height: 38px;
        width: 38px;
        border-radius: 3px;
        display: block;
        cursor: pointer;
        position: fixed;
        right: 30px;
        bottom: 50px;
        display: none;
    }


</style>
</html>